<script setup>
import { onMounted, ref } from 'vue'
import commonModel from '@/http/modules/common.js'
import Utility from '@/utils/utility'
import prizeGift from '@/assets/img/prize/prize_gift.png'
const prize_rule_bg = `${Utility.getOssStaticDomain()}/cross/prize/prize_rule_bg.png`
const paramsCode = Utility.getSearchParams().code
const myGiftList = ref(null)
const loadedRuleBg = ref(false)
function getMyPrizeInfo() {
  commonModel
    .gatewayApi({
      service: 'cb_trade_draw_record',
      bizContent: {
        code: paramsCode,
      },
      version: '1.0.0',
    })
    .then((result) => {
      if (result) {
        myGiftList.value = result
      }
    })
}
function loadRuleBg(){
  Utility.imgPreLoad(prize_rule_bg,'prize_rule_bg').then(()=>loadedRuleBg.value=true)
}
onMounted(() => {
  getMyPrizeInfo()
  loadRuleBg()
})
</script>
<template>
  <div class="prize-wrapper" :style="{backgroundImage:loadedRuleBg && `url(${prize_rule_bg})`}">
    <div class="prize-box">
      <p class="prize-box-title">
        <span class="text">跨境新开户 赢千元豪礼</span>
      </p>
      <i class="line"></i>
      <div v-if="myGiftList">
        <div
          class="prize-box-content"
          v-for="(gift,index) in myGiftList"
          :key="gift.awardCode"
        >
          <div class="prize-item">
            <img :src="prizeGift" alt="" class="prize-item-img" />
            <div class="description">
              <p class="description-name">{{ gift.prizeName }}</p>
              <p class="description-timer">中奖时间：{{ gift.gmtCreate }}</p>
            </div>
          </div>
          <p class="prize-illustrate">
            {{ gift.receiveDesc }}
          </p>
          <i class="line" v-if="index+1 < myGiftList.length"></i>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.prize {
  &-wrapper {
    width: 100%;
    background-size: 100%;
    padding: 0.21rem 0.24rem;
    min-height: calc(100vh - 0.46rem);
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    background-image: linear-gradient(to right bottom, #eadfe8, #fcbbab);
  }
  &-box {
    height: fit-content;
    padding: 0.12rem 0.24rem 0.32rem;
    box-sizing: border-box;
    width: 3.28rem;
    background: #fff;
    border-radius: 0.1rem;
    &-title {
      display: flex;
      text-align: center;
      justify-content: center;
      align-items: center;
      font-size: 0.15rem;
      color: #f78082;
    }
    &-content {
      margin-top: 0.2rem;
      .prize-item {
        display: flex;

        &-img {
          width: 0.48rem;
          height: 0.44rem;
          background-size: 100%;
          margin-right: 0.24rem;
        }
        .description {
          &-name {
            font-size: 0.21rem;
            color: #2e2e2e;
            font-weight: bolder;
            margin-bottom: 0.05rem;
          }
          &-timer {
            color: #c2bfbf;
            white-space: nowrap;
            font-size: 0.14rem;
            font-weight: bolder;
          }
        }
      }
      .prize-illustrate {
        margin-top: 0.27rem;
        color: #c2bfbf;
        font-size: 0.12rem;
      }
    }
    .line {
      display: inline-block;
      margin-top: 0.04rem;
      background-color: #f78082;
      height: 1px;
      width: 2.78rem;
    }
  }
}
</style>
